<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SweetAlert2 弹出框 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col">
            <div class="alert alert-light alert-elevate fade show" role="alert">
                <div class="alert-icon"><i class="flaticon-warning e-font-brand"></i></div>
                <div class="alert-text">
                    SweetAlert2是一个弹出框插件
                    <a class="e-link e-font-bold" href="https://codeseven.github.io/toastr" target="_blank">官方文档</a>
                    <a class="e-link e-font-bold" href="https://github.com/CodeSeven/toastr" target="_blank">Github</a>
                </div>
            </div>
        </div>
    </div>

    <!--begin::Portlet-->
    <div class="card">
        <div class="card-head">
            <div class="card-head-label">
                <h3 class="card-head-title">
                    示例
                </h3>
            </div>
        </div>
        <div class="card-body">
            <table class="table table-bordered">
                <tr>
                    <td style="width: 40%; vertical-align: middle;">默认</td>
                    <td>
                        <button type="button" class="btn btn-info btn-custom" id="sweetalert-demo-1"> 点击查看示例</button>
                    </td>
                </tr>
                <tr>
                    <td style="width: 40%; vertical-align: middle;">标题&副标题</td>
                    <td>
                        <button type="button" class="btn btn-success btn-custom" id="sweetalert-demo-2"> 点击查看示例</button>
                    </td>
                </tr>
                <tr>
                    <td style="width: 40%; vertical-align: middle;"><code>warning</code>, <code>error</code>, <code>success</code>, <code>info</code> 和 <code>question</code> 状态图标</td>
                    <td>
                        <button type="button" class="btn btn-warning btn-custom" id="sweetalert-demo-3-1"> Warning</button>
                        <button type="button" class="btn btn-danger btn-custom" id="sweetalert-demo-3-2"> Error</button>
                        <button type="button" class="btn btn-success btn-custom" id="sweetalert-demo-3-3"> Success</button>
                        <button type="button" class="btn btn-info btn-custom" id="sweetalert-demo-3-4"> Info</button>
                        <button type="button" class="btn btn-dark btn-custom" id="sweetalert-demo-3-5"> Question</button>
                    </td>
                </tr>
                <tr>
                    <td style="width: 40%; vertical-align: middle;">设置按钮的样式及文字</td>
                    <td>
                        <button type="button" class="btn btn-success btn-custom" id="sweetalert-demo-4"> 点击查看示例</button>
                    </td>
                </tr>
                <tr>
                    <td style="width: 40%; vertical-align: middle;">使用带图标的按钮</td>
                    <td>
                        <button type="button" class="btn btn-danger btn-custom" id="sweetalert-demo-5"> 点击查看示例</button>
                    </td>
                </tr>
                <tr>
                    <td style="width: 40%; vertical-align: middle;">自定义位置并自动关闭</td>
                    <td>
                        <button type="button" class="btn btn-success btn-custom" id="sweetalert-demo-6"> 点击查看示例</button>
                    </td>
                </tr>
                <tr>
                    <td style="width: 40%; vertical-align: middle;">使用<code>animate.css</code>动画效果 </td>
                    <td>
                        <button type="button" class="btn btn-brand btn-custom" id="sweetalert-demo-7"> 点击查看示例</button>
                    </td>
                </tr>
                <tr>
                    <td style="width: 40%; vertical-align: middle;">询问</td>
                    <td>
                        <button type="button" class="btn btn-info btn-custom" id="sweetalert-demo-8"> 点击查看示例</button>
                    </td>
                </tr>
                <tr>
                    <td style="width: 40%; vertical-align: middle;">设置确定和取消按钮回调</td>
                    <td>
                        <button type="button" class="btn btn-danger btn-custom" id="sweetalert-demo-9"> 点击查看示例</button>
                    </td>
                </tr>
                <tr>
                    <td style="width: 40%; vertical-align: middle;">自定义图片</td>
                    <td>
                        <button type="button" class="btn btn-warning btn-custom" id="sweetalert-demo-10"> 点击查看示例</button>
                    </td>
                </tr>
                <tr>
                    <td style="width: 40%; vertical-align: middle;">自动关闭的提示</td>
                    <td>
                        <button type="button" class="btn btn-dark btn-custom" id="sweetalert-demo-11"> 点击查看示例</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!--end::Portlet-->
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->

<!--str:: 页面js -->
<script src="/assets/js/demo1/pages/ui/assembly/sweet-alert2.js" type="text/javascript"></script>
<!--str:: 页面js -->
</body>
</html>